<template>
  <div class="container">
    <div class="text">
      <div class="banner-content">
        <div class="search-bar">
          <!-- tab栏 -->
          <el-row type="flex" class="search-tab">
            <span
              v-for="(item, index) in options"
              :key="index"
              :class="{ active: index === currentOption }"
              @click="handleOption(index)"
            >
              <i>{{ item.name }}</i>
            </span>
          </el-row>

          <!-- 输入框 -->
          <el-row type="flex" align="middle" class="search-input">
            <input
              :placeholder="options[currentOption].placeholder"
              v-model="searchValue"
              @keyup.enter="handleSearch"
            />
            <!--  @keyup.enter="handleSearch"  键盘抬起 触发事件  -->
            <i class="el-icon-search" @click="handleSearch"></i>
            <!--  点击 iconfont 图标触发事件  事件内需要发送ajax 请求获取数据 -->
          </el-row>
        </div>
      </div>
      <!-- <el-input v-model="input" placeholder="请输入内容"></el-input> -->
    </div>

    <el-carousel height="800px" :interval="3000">
      <el-carousel-item v-for="(item, index) in bannerss" :key="index">
        <div
          class="banner-image"
          :style="
            `background:url(${item.url}) center center no-repeat ;
      background-size:contain contain;
      `
          "
        ></div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
// import search from "../components/search";
export default {
  data() {
    return {
      input: "",
      bannerss: [
        {
          url: "https://w.wallhaven.cc/full/2e/wallhaven-2evelg.png"
        },
        {
          url: "https://w.wallhaven.cc/full/vg/wallhaven-vgrzd3.png"
        },
        {
          url: "https://w.wallhaven.cc/full/39/wallhaven-39e36y.png"
        },
        {
          url: "https://w.wallhaven.cc/full/q6/wallhaven-q6ppyr.jpg"
        },
        {
          url: "https://w.wallhaven.cc/full/j5/wallhaven-j51v9m.png"
        }
      ],

      options: [
        // 搜索框tab选项
        {
          name: "攻略",
          placeholder: "搜索城市",
          pageUrl: "/post?city="
        },
        {
          name: "酒店",
          placeholder: "请输入城市搜索酒店",
          pageUrl: "/hotel?city="
        },
        {
          name: "机票",
          placeholder: "请输入出发地",
          pageUrl: "/air"
        }
      ],
      searchValue: "", // 搜索框的值
      currentOption: 0 // 当前选中的选项
    };
  },
  created() {
    // 创建页面时, 需要获取数据
    this.$axios({
      url: "/scenics/banners"
    }).then(res => {
      console.log(res.data);
      this.banners = res.data.data.map(img => {
        return {
          ...img,
          url: this.$axios.defaults.baseURL + img.url
        };
      });
    });
  },
  methods: {
    handleOption(index) {
      console.log("修改当前激活标签");
      // 如果点击的是机票就直接跳转
      if (index == 2) {
        this.$router.push("/air");
      } else {
        this.currentOption = index;
      }
    },
    handleSearch() {
      console.log("触发了搜索函数");
      // 应该带着当前的输入值, 跳转到新页面
      this.$router.push(
        this.options[this.currentOption].pageUrl + "?city=" + this.searchValue
      );
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  min-width: 1000px;
  margin: 0 auto;
  position: relative;

  /deep/ .el-carousel__container {
    height: 700px;
  }
  .text {
    position: absolute;
    width: 500px;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -250px;
    z-index: 999;
  }
  .banner-image {
    width: 100%;
    height: 100%;
  }
}
.nav {
  float: left;
  width: 90px;
  height: 40px;
  background: rgba(0, 0, 0, 0.4);
  text-align: center;
  line-height: 40px;
  border-right: 10px solid transparent;
  border-bottom: 40px solid rgba(0, 0, 0, 0.4);
  border-top: 0 solid;
  border-left: 0 solid;
}
.box {
  float: left;
  width: 1px;
  //   height: 1px;
  //   border: 100px solid #ccc;
  border-right: 10px solid transparent;
  border-bottom: 40px solid rgba(0, 0, 0, 0.4);
  border-top: 0 solid;
  border-left: 0 solid;
}

.banner-content {
  z-index: 9;
  width: 1000px;
  position: absolute;
  left: 50%;
  top: 45%;
  margin-left: -500px;
  border-top: 1px transparent solid;

  .search-bar {
    width: 552px;
    margin: 0 auto;
  }

  .search-tab {
    .active {
      i {
        color: #333;
      }
      &::after {
        background: #eee;
      }
    }

    span {
      width: 82px;
      height: 36px;
      display: block;
      position: relative;
      margin-right: 8px;
      cursor: pointer;

      i {
        position: absolute;
        z-index: 2;
        display: block;
        width: 100%;
        height: 100%;
        line-height: 30px;
        text-align: center;
        color: #fff;
      }

      &:after {
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        content: "";
        width: 100%;
        height: 100%;
        border: 1px rgba(255, 255, 255, 0.2) solid;
        border-bottom: none;
        transform: scale(1.1, 1.3) perspective(0.7em) rotateX(2.2deg);
        transform-origin: bottom left;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 1px 2px 0 0;
        box-sizing: border-box;
      }
    }
  }

  .search-input {
    width: 550px;
    height: 46px;
    background: #fff;
    border-radius: 0 4px 4px 4px;
    border: 1px rgba(255, 255, 255, 0.2) solid;
    border-top: none;
    box-sizing: unset;

    input {
      flex: 1;
      height: 20px;
      padding: 13px 15px;
      outline: none;
      border: 0;
      font-size: 16px;
    }

    .el-icon-search {
      cursor: pointer;
      font-size: 22px;
      padding: 0 10px;
      font-weight: bold;
    }
  }
}
</style>
